<template>
	<view class="content">
		<!--图片上传-->
		<view class="content_1">
			<view class="upload_view">
				<view class="upload_title">封面图</view>
				<view class="title_line"></view>
				<view class="uploadimg_view" @click='fengmianupload' v-if="fengmianstate == '' || fengmianstate == '-3' || fengmianstate == '0'">
					<image class="uploadimg" src="../../../../../../static/mine/owner/photo.svg"></image>
				</view>
				<image class="uploadimg_view" @click='fengmianupload' v-if="fengmianstate == '1'" :src="fengmianimg"></image>
			</view>
			<view class="upload_view">
				<view class="upload_title">大厅</view>
				<view class="title_line"></view>
				<view class="upload_box">
					<block v-for="(data, index) in CreateHallPhoto" :key='index'>
						<image class="uploadimg_view" :src="data.show_url" @click="UpdateImageCover(index, 'dating')"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest('dating')" v-if="CreateHallPhoto.length < 5">
						<image class="uploadimg" src="../../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
			<view class="upload_view">
				<view class="upload_title">房间</view>
				<view class="title_line"></view>
				<view class="upload_box">
					<block v-for="(data, index) in CreateBedroomPhoto" :key='index'>
						<image class="uploadimg_view" :src="data.show_url" @click="UpdateImageCover(index, 'bedroom')"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest('bedroom')" v-if="CreateBedroomPhoto.length < 5">
						<image class="uploadimg" src="../../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
			<view class="upload_view">
				<view class="upload_title">卫生间（选填）</view>
				<view class="title_line"></view>
				<view class="upload_box">
					<block v-for="(dataInfo, index) in CreateToiletPhoto" :key='index'>
						<image class="uploadimg_view" :src="dataInfo.show_url" @click="UpdateImageCover(index, 'weishengjian')"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest('weishengjian')" v-if="CreateToiletPhoto.length < 5">
						<image class="uploadimg" src="../../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<!--下一步-->
		<view class="content_2">
			<view class="next" @click="toNext">下一步</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				showaddimg: '0',
				addimgstate: '1',
				fengmianstate: '',
				fengmianimg: '',
				datingstate: '',
				datingimg: '',
				weishenghjianstate: '',
				weishengjianimg: '',
				fangjianstate1: '',
				fangjianimg1: '',
				fangjianstate2: '',
				fangjianimg2: '',
				fangjianstate3: '',
				fangjianimg3: '',
				fangjianstate4: '',
				fangjianimg4: '',
				fangjianstate5: '',
				fangjianimg5: '',
				houseimg: [],
				roomimg: [],
				roomarr: [],
				//房屋id
				house_id: '',
				//大厅图片数组
				CreateHallPhoto: [],
				//房间图片数组
				CreateBedroomPhoto: [],
				//卫生间图片
				CreateToiletPhoto: [],
			}
		},
		/**
		 * 页面加载
		 * @param {Object} option
		 */
		onLoad: function(option){
			let that = this;
			this.house_id = option.house_id;	// 房源id
			new Request('landboos/Edit_House_Info/GetHouseInfo').request(
				()=>{
					return 'POST';
				},
				()=>{
					return {
						openid: app.globalData.openid,
						house_id: this.house_id,
					}
				},
				(res)=>{
					//房源封面图片
					this.fengmianimg = res.data.house_DetailImage[0].show_image;
					this.fengmianstate = 1;
					//封装封面图
					this.fengmian = {
						'fengmian': {
							'photo_id': res.data.house_DetailImage[0].photo_id,
							'show_url': res.data.house_DetailImage[0].show_image,
							'system_url': res.data.house_DetailImage[0].system_url,
						}
					}
					let ArrayDetaiImage = res.data.house_DetailImage;
					for(let i=0,l=ArrayDetaiImage.length; i < l; i++){
						//大厅
						if(ArrayDetaiImage[i].show_position == 2){
							ArrayDetaiImage[i].show_url = ArrayDetaiImage[i].show_image;
							this.CreateHallPhoto.push(ArrayDetaiImage[i]);
						}
						//卫生间
						if(ArrayDetaiImage[i].show_position == 4){
							ArrayDetaiImage[i].show_url = ArrayDetaiImage[i].show_image;
							this.CreateToiletPhoto.push(ArrayDetaiImage[i]);
						}
						//房间
						if(ArrayDetaiImage[i].show_position == 3){
							ArrayDetaiImage[i].show_url = ArrayDetaiImage[i].show_image;
							this.CreateBedroomPhoto.push(ArrayDetaiImage[i]);
						}
					}
				}
			);
		},
		methods: {
			/**
			* 定义请求地址
			*/
			getUrl: function(type){
				let config = {};
				switch (type) {
					//封面定义请求参数和地址
					case 'fengmian':
						config = {
							'url': 'landboos/Create_House_Photo/CreateCoverPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						};
						break;
					//大厅定义请求参数和地址
					case 'dating':
						config = {
							'url': 'landboos/Create_House_Photo/CreateHallPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						};
						break;
					//房间定义请求参数和地址
					case 'bedroom':
						config = {
							'url': 'landboos/Create_House_Photo/CreateRoomPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						};
						break;
					//卫生间定义请求参数和地址
					case 'weishengjian':
						config = {
							'url':'landboos/Create_House_Photo/CreateToiletPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						}
						break;
					default:
				}
				return config;
			},
			/**
			 * 修改图片请求接口
			 */
			UpdateImageCover: function(index, type){
				let that = this;
				//获取类型定义内容
				let infoDate = that.getUrl(type);
				new Request(infoDate.url).uploadImage(
					()=>{
						return infoDate.param
					},
					(res)=>{
						if(type == 'fengmian'){
							this.fengmianupload(res);
						}else if(type == 'dating'){
							this.datingupload(res, 'update', index)
						}else if(type == 'bedroom'){
							this.bedRoomUpload(res, 'update', index)
						}else if(type == 'weishengjian'){
							this.weishengjianupload(res, 'update', index);
						}
						return res;
					}
				);
			},
			/**
			* 发送请求接口
			* type: 上传图片类型: fengmian, dating, fangjian, weishengjian
			*/ 
			imageRequest: function(type, param = ''){
				let that = this;
				//获取类型定义内容
				let infoDate = that.getUrl(type);
				
				new Request(infoDate.url).uploadImage(
					()=>{
						return infoDate.param
					},
					(res)=>{
						if(type == 'fengmian'){
							this.fengmianupload(res);
						}else if(type == 'dating'){
							this.datingupload(res, 'add');
						}else if(type == 'bedroom'){
							this.bedRoomUpload(res, 'add');
						}else if(type == 'weishengjian'){
							this.weishengjianupload(res, 'add');
						}
						return res;
					}
				);
			},
			//	跳转下一步基础信息
			toNext: function() {
				if (this.fengmian == undefined) {
					new Request().uni.showToast('未上传封面');
					return;
				}
				if (this.CreateHallPhoto == '') {
					new Request().uni.showToast('未上传大厅');
					return;
				} 
				if (this.CreateToiletPhoto == '') {
					new Request().uni.showToast('未上传卫生间');
					return;
				} 
				if (this.CreateBedroomPhoto == '') {
					new Request().uni.showToast('未上传房间');
					return;
				} 
				
				this.roomarr = {
					'room': this.CreateBedroomPhoto
				}
				this.dating = {
					'dating': this.CreateHallPhoto,
				}
				this.weishengjian = {
					'weishengjian': this.CreateToiletPhoto,
				}
				this.houseimg.push(this.fengmian)
				this.houseimg.push(this.dating)
				this.houseimg.push(this.weishengjian)
				this.houseimg.push(this.roomarr)
				uni.navigateTo({
					url: '/pages/mine/owner/manage/edithouse/update2/update2?houseimg=' + JSON.stringify(this.houseimg) + '&house_id=' + this.house_id,
					success: () => {
						this.houseimg = [];
					}
				})
				
				console.log(this.houseimg)
			},
			//封面上传图片
			fengmianupload: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://api.yihua.pub/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								console.log(JSON.parse(res.data))
								this.fengmianstate = JSON.parse(res.data).code
								this.fengmianimg = JSON.parse(res.data).show_url
								this.fengmian = {
									'fengmian': {
										'photo_id': JSON.parse(res.data).photo_id,
										'show_url': JSON.parse(res.data).show_url,
										'system_url': JSON.parse(res.data).system_url,
									}
								}
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//大厅上传图片
			datingupload: function(res, param = '', index = '') {
				//大厅对象
				let dating = {
					'photo_id': res.photo_id,
					'show_url': res.show_url,
					'system_url': res.system_url,
				}
				if(param == 'add'){
					this.CreateHallPhoto.push(dating);
					console.log(this.CreateHallPhoto);
					return;
				}
				if(param == 'update'){
					//更新视图层数据
					this.$set(this.CreateHallPhoto, index, dating);
					console.log(this.CreateHallPhoto);
					return;
				}
			},
			//卫生间上传图片
			weishengjianupload: function(res, param = '', index = '') {
				//卫生间对象
				let weishengjian = {
					'photo_id': res.photo_id,
					'show_url': res.show_url,
					'system_url': res.system_url,
				}
				if(param == 'add'){
					this.CreateToiletPhoto.push(weishengjian);
					console.log(this.CreateToiletPhoto);
					return;
				}
				if(param == 'update'){
					//更新视图层数据
					this.$set(this.CreateToiletPhoto, index, weishengjian);
					console.log(this.CreateToiletPhoto);
					return;
				}
			},
			//房间上传图片
			bedRoomUpload: function(res, param = '', index = ''){
				let config = {
					'photo_id': res.photo_id,
					'show_url': res.show_url,
					'system_url': res.system_url,
				}
				if(param == 'add'){
					this.CreateBedroomPhoto.push(config);
					console.log(this.CreateBedroomPhoto);
					return;
				}
				if(param == 'update'){
					//更新视图层数据
					this.$set(this.CreateBedroomPhoto, index, config);
					console.log(this.CreateBedroomPhoto);
					return;
				}
			},
			//添加上传图片
			addupload: function() {
				this.showaddimg = '0'
				this.addimgstate++
				if (this.addimgstate >= 6) {
					uni.showToast({
						position: 'center',
						title: '最多只能添加5个房间图片...',
						icon: 'none',
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		position: relative;
	}

	/*
		图片上传样式
	*/
	.content_1 {
		margin-top: 20upx;
		margin: 0 40upx;
	}

	.upload_view {
		height: auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 40upx;
		flex-wrap: wrap;
	}

	.upload_title {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	.title_line {
		height: 3upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 20upx;
	}

	.upload_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.uploadimg_view {
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
		border: 2upx solid #BBBBBB;
		background-color: #e5e5e5;
		display: flex;
		align-items: center;
		margin-right: 40upx;
		margin-bottom: 20upx;
	}

	.uploadimg {
		width: 48upx;
		height: 48upx;
		margin: 0 auto;
	}

	/*
		下一步样式
	*/
	.content_2 {
		position: fixed;
		z-index: 999;
		right: 30upx;
		bottom: 90upx;
		height: 72upx;
		width: 250upx;
	}

	.next {
		height: 72upx;
		width: 250upx;
		border-radius: 10upx;
		background-color: #63D0D5;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
